<template>
  <el-card class="box-card">
    <el-table
      :data="loginLogData"
      @sort-change="sortTable"
      :default-sort="{prop:'createTime',order:'descending'}"
      style="width: 100%">
      <el-table-column
        prop="loginName"
        label="登录名"
        sortable="custom"
        width="100">
      </el-table-column>
      <el-table-column
        prop="roleName"
        label="用户名"
        width="100">
      </el-table-column>
      <el-table-column
        prop="clientIp"
        sortable="custom"
        label="IP地址" width="130">
      </el-table-column>
      <el-table-column
        prop="optContent"
        label="内容">
      </el-table-column>
      <el-table-column
        prop="createTime"
        sortable="custom"
        label="创建时间" width="150">
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page.sync="form.page"
      :page-size="form.rows"
      layout="total, prev, pager, next, jumper"
      :total="total" @current-change="loadData">
    </el-pagination>
  </el-card>
</template>

<script>
import { getLoginLogData } from '_api/syslog'

export default {
  name: 'loginLog',
  data () {
    return {
      loginLogData: [],
      form: {
        page: 1,
        rows: 10
      },
      total: 0
    }
  },
  created () {
    this.loadData()
  },
  methods: {
    loadData () {
      getLoginLogData(this.form).then(res => {
        this.loginLogData = res.rows
        this.total = res.total
      })
    },
    sortTable (sortData) {
      this.form.sort = sortData.prop
      this.form.order = sortData.order === 'descending' ? 'desc' : 'asc'
      this.loadData()
    }
  }
}
</script>

<style scoped>

</style>
